<template>
    <div class="my-signIn">
        <div class="content-signin">
            <div class="user-icon">
                <img class="round_icon" id="headimgurl" :src="userInfo.headImgUrl" />
                <div>
                    <img class="img1" src="/images/icon10.png">
                </div>
                <div>
                    <img class="img2" src="/images/icon12.png">
                </div>
                <div class="font" v-html="signIntegral">{{signIntegral}}</div>
            </div>
        </div>
        <div class="bg-gray item_signSettinglist" id="signSettinglist">
            <div class="signin-box" v-for="item,index in signSettinglist" :key="index">
                <div class="font">{{item.signday}}天</div>
                <li @click="getSignText(item.signday,item.reward);" :class="userSignday>=item.signday?'list-style-type-disc':'list-style-type-circle'"></li>
                <div :class="(index+1)%5 != 0 && (index + 1) != signSettingLength ?'signin-line':'signin-line-hideen'"></div>
                <img src="/images/icon11.png">
            </div>
        </div>
        <div class="content-block" style="margin: 0.75rem 0;">
            <div class="row">
                <div class="col-100">
                    <div class="sign-font">{{signFont}}</div>
                    <!--<a id="signInSave" style="background:#76DCE1" class="button button-big button-fill button-success">签到领取</a>-->
                    <div style="padding: 0 10px;">
                        <van-button size="large" :class="signStatus?'sign-button':'unsign-button'" @click="signInSave();">{{signMsg}}</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Cookies from 'js-cookie'
    import {Toast,Dialog} from 'vant'
    export default {
        name: "MySignIn",
        data(){
            return{
                token:'',
                signMsg:'签到领取',
                signStatus:false,
                signFont:'',
                signIntegral:'',
                signSettinglist:[],
                userSignday:'',
                signSettingLength:0
            }
        },
        computed:{
            ...mapState({
                userInfo:state=>state.user.userInfo
            }),
        },
        mounted(){
            this.token = Cookies.get("token")
            this.$api.mySignIn.signInList({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    var success = data.success
                    if(!success) {
                        Toast('获取数据失败！')
                        return
                    }
                    var signstatus = data.signstatus
                    if(signstatus == 1){
                        this.signMsg = '今日已签到'
                        this.signStatus = true
                    }
                    this.userSignday = data.userSignday //个人连续签到天数
                    this.getSignText
                    this.signFont = "连续签到" + this.userSignday + "天"
                    this.signSettinglist = data.signSettingJsonList
                    if(this.signSettinglist.length > 0){
                        this.signSettingLength = this.signSettinglist.length
                        var height = Math.ceil(this.signSettingLength/5) * 95
                        document.getElementById("signSettinglist").style.height = height + 'px';
                    }
                    //初始化
                    if(data.userSignReward != null) {
                        this.getSignText(data.userSignday + 1, data.userSignReward)
                    }else{
                        this.signIntegral = "你已完成所有签到"
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            getSignText(signday,reward){
                var text = "第<span style='color:green;'>" + signday + "</span>天奖励<br/>奖励<span style='color:red;'>" + reward + "</span>积分"
                this.signIntegral = text
            },
            signInSave(){
                if(this.signStatus){
                    Toast('今日已签到')
                    return
                }
                this.$api.mySignIn.signIn({openid:this.token}).then(res=>{
                    if(res.code==0){
                        var data = JSON.parse(res.data)
                        var success = data.success
                        if(success){
                            var signday = data.signday
                            var reward = data.reward
                            var msg = "你已连续签到" + signday + "天，获取" + reward + "积分"
                            Dialog.alert({
                                title: '提示',
                                message: msg
                            }).then(() => {
                                location.reload()
                            });
                        }else {
                            var msg = data.msg
                            Toast(msg)
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }

        }

    }
</script>

<style lang="less" scoped>
.bg-white{
    background: white;
}
.bg-gray{
    background: #F1F5F8;
}
.my-signIn{
    .content-signin {
        padding-bottom: 15px;
        position: relative;
        z-index: 1;
        .user-icon {
            text-align: center;
            padding-top: 30px;
            .round_icon {
                width: 65px;
                height: 65px;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .img1 {
                position: relative;
                width: 85%;
                margin-top: -26px;
                z-index: -1;
            }
            .img2 {
                position: relative;
                width: 25%;
                margin-top: -30px;
                z-index: -1;
            }
            .font {
                font-size: 12px;
                margin-top: 10px;
            }
        }
    }
    .item_signSettinglist{
        .signin-box {
            padding-top: 15px;
            width: 20%;
            text-align: center;
            float: left;
            li {
                color: #FD676A;
                font-size: 50px;
                line-height: 12.5px;
                margin-left: 36%;
                margin-top: 5px;
            }
            img {
                width: 40%;
                margin-top: 10px;
            }
            .font {
                color: orange;
                font-size: 16px;
            }
            .signin-line {
                width: 68%;
                border-bottom: solid 1.3px #b1c0ca;
                margin-top: -5px;
                margin-left: 67%;
            }
            .signin-line-hideen {
                margin-top: -5px;
                height: 1.3px;
            }
        }
    }
    .content-block{
        .sign-font {
            text-align: center;
            font-size: 12px;
            padding-bottom: 10px;
        }
    }

}

.unsign-button {
    background:#76DCE1;
    color: #FFFFFF;
}

.sign-button {
    background:#D2DBE2;
    color: #FFFFFF;
}

.list-style-type-disc{
    list-style-type: disc;
}

.list-style-type-circle{
    list-style-type: circle;
}
</style>
